<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>业务流程修改页面</title>

    <!--可选，字体-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ 必须的 ]-->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <!--Nifty Stylesheet [ 必须的 ]-->
    <link href="../../../css/nifty.min.css" rel="stylesheet">
    <!--Nifty Premium Icon [ demo用到的icon css ]-->
    <link href="../../../css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <!--=================================================-->
    <!--Pace - 页面加载进度条 [可选]-->
    <link href="../../../plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../../../plugins/pace/pace.min.js"></script>
    <!--Demo [ demo用到的css ]-->
    <link href="../../../css/demo/nifty-demo.min.css" rel="stylesheet">


    <!--alex2:Bootstrap Select [ 下拉框 ]-->
    <link href="../../../plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <!--Themify Icons [ 图标样式 ]-->
    <link href="../../../plugins/themify-icons/themify-icons.min.css" rel="stylesheet">
</head>

<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <navbar></navbar>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">
            <div id="page-head">
            </div>
            <!--Page content-->
            <!--===================================================-->
            <div id="page-content">
                <div class="panel">
                    <div class="panel-body">
                        <div class="blog-content">
                            <div class="blog-body">

                                <div class="pad-lft">
                                    <p>产品名称：{{productInfo.name}}</p>
                                    <p>产品代号：{{productInfo.codeName}}</p>
                                    <p>终端类型：
                                        <span v-if="productInfoTerminalIntTypes=='1'">PC 端</span><span v-if="productInfoTerminalIntTypes=='2'">App 端</span><span v-if="productInfoTerminalIntTypes=='3'">其他</span>
                                        <span v-if="productInfoTerminalIntTypes=='1,2'">PC 端,App 端</span><span v-if="productInfoTerminalIntTypes=='2,1'">PC 端,App 端</span><span v-if="productInfoTerminalIntTypes=='1,3'">PC 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,1'">PC 端,其他</span><span v-if="productInfoTerminalIntTypes=='2,3'">App 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,2'">App 端,其他</span>
                                        <span v-if="productInfoTerminalIntTypes=='1,2,3'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='1,3,2'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='2,3,1'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='2,1,3'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,2,1'">PC 端,App 端,其他</span><span v-if="productInfoTerminalIntTypes=='3,1,2'">PC 端,App 端,其他</span>
                                    </p>
                                    <p>行业类型：<span v-if="productInfo.dicIndustryId=='1'">教育</span><span v-if="productInfo.dicIndustryId=='2'">金融</span><span v-if="productInfo.dicIndustryId=='3'">医疗</span><span v-if="productInfo.dicIndustryId=='4'">其他</span></p>
                                    <p>产品类型：<span v-if="productInfo.dicProductInfoTypeId=='1'">教育</span><span v-if="productInfo.dicProductInfoTypeId=='2'">金融</span><span v-if="productInfo.dicProductInfoTypeId=='3'">医疗</span><span v-if="productInfo.dicProductInfoTypeId=='4'">其他</span></p>
                                    <p>产品介绍：{{productInfo.des}}</p>
                                </div>

                                <hr>
                                <a href="#" class="btn btn-sm btn-icon btn-primary ti-plus mar-rgt icon-lg add-tooltip pull-right" data-original-title="添加新流程" data-container="body" @click="append()"></a>
                                <h4 class="pad-btm bord-btm"><i class="demo-pli-male-female icon-fw v-middle"></i>业务流程</h4>
                                <div class="panel panel-body" v-for="(productInfoBizFlowInfoVo,index) in productInfoBizFlowInfoVos">

                                    <div class="pad-all" >
                                        <div class="row mar-all pad-lft">
                                            <p><span class="label label-info mar-rgt">No.{{index+1}}</span>
                                                <a href="#" class="btn btn-sm btn-icon btn-danger ti-trash icon-lg add-tooltip pull-right" data-original-title="删除流程" data-container="body" @click="del(index)"></a>
                                            </p>
                                            <div class="form-group">
                                                <label class="control-label">流程名称</label>
                                                <input type="text" class="form-control" v-model="productInfoBizFlowInfoVo.name">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label">流程介绍</label>
                                                <textarea rows="9" class="form-control" placeholder="Your content here.." v-model="productInfoBizFlowInfoVo.des"></textarea>
                                            </div>
                                            <hr>
                                        </div>
                                    </div>
                                </div>

                                <hr>
                                <div class="form-group pull-right">
                                    <button type="button" class="btn btn-info" @click="edit4Draft()">存为草稿</button>
                                    <button type="button" class="btn btn-info" @click="edit4Approval()">提交审核</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--===================================================-->
            <!--End page content-->

        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <mainnav></mainnav>

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pad-rgt pull-right">
            You have <a href="#" class="text-main"><span class="badge badge-danger">3</span> pending action.</a>
        </div>


        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt">
            14GB of <strong>512GB</strong> Free.
        </div>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2018 Your Company</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->


<!--JAVASCRIPT-->
<!--jQuery [ 必须的 ]-->
<script src="../../../js/jquery.min.js"></script>
<!--BootstrapJS [ 必须的 ]-->
<script src="../../../js/bootstrap.min.js"></script>
<!--NiftyJS [ 必须 ]-->
<script src="../../../js/nifty.min.js"></script>
<!--=================================================-->
<!--Demo script [ demo示例使用 ]-->
<script src="../../../js/demo/nifty-demo.min.js"></script>

<!--alex2:Bootstrap Select [ 下拉框 ]-->
<script src="../../../plugins/bootstrap-select/bootstrap-select.min.js"></script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--组件导航条-->
<script src="../../../js/component/header.js"></script>
<!--组件导航栏-->
<script src="../../../js/component/mainnav.js"></script>
<!--公共端口号-->
<script src="../../../js/route/route.js"></script>
<!--axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    var vue=new Vue({
        el:"#container",
        data: {
            //前端终端类型
            productInfoTerminalIntTypes:[],
            productInfoBizFlowInfoVos:[{}],
            //后端
            productInfo:{
                //终端类型
                productInfoTerminalTypes:[],
                //业务流程
                productInfoBizFlowInfos:[],
            }
        },
        methods: {
            detail() {
                let productInfoCode = localStorage.getItem("productInfoCode");
                var str="";
                var productInfoTerminalTypeStr="";
                axios.get(`${window.dasConfig.ipPort}/project/product-info/detail/`+productInfoCode).then(res=>{
                    vue.productInfo=res.data;
                });
                axios.get(`${window.dasConfig.ipPort}/project/product-info/findProductInfoTerminalType/`+productInfoCode).then(res=>{
                    vue.productInfo.productInfoTerminalTypes=res.data;
                    for(productInfoTerminalType of vue.productInfo.productInfoTerminalTypes){
                        productInfoTerminalTypeStr+=","+productInfoTerminalType.type;
                        str=productInfoTerminalTypeStr.substring(1);
                    }
                    vue.productInfoTerminalIntTypes=str;
                    console.log(vue.productInfoTerminalIntTypes);
                });
                axios.get(`${window.dasConfig.ipPort}/project/product-info-biz-flow-info/findProductInfoBiz/`+productInfoCode).then(res=>{
                    vue.productInfoBizFlowInfoVos=res.data;
                })

            },
            append(){
                vue.productInfoBizFlowInfoVos.push({});
            },
            del(index){
                this.productInfoBizFlowInfoVos.splice(index,1);
            },
            edit4Draft() {
                vue.productInfo.productInfoBizFlowInfos=vue.productInfoBizFlowInfoVos;
                console.log(vue.productInfo);
                axios.post(`${window.dasConfig.ipPort}/project/product-info-biz-flow-info/edit4Draft`,vue.productInfo).then(res=>{
                    if(res){
                        alert("业务流程存为草稿成功!")
                        location.href="../product-info/product-info-list.html";
                    }
                });
            },
            edit4Approval() {
                vue.productInfo.productInfoBizFlowInfos=vue.productInfoBizFlowInfoVos;
                console.log(vue.productInfo);
                axios.post(`${window.dasConfig.ipPort}/project/product-info-biz-flow-info/edit4Approval`,vue.productInfo).then(res=>{
                    if(res){
                        alert("业务流程提交审核成功!")
                        location.href="../product-info/product-info-list.html";
                    }
                });
            }
        },
        created() {
            this.detail();
        }
    })
</script>
</body>
</html>
